import React from 'react';
import { Button, Result } from 'antd';
import { useNavigate } from 'react-router-dom';

const Error500: React.FC = () => {
  const navigate = useNavigate();

  const handleBackHome = () => {
    navigate('/');
  };

  const handleRefresh = () => {
    window.location.reload();
  };

  return (
    <div style={{ 
      height: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center' 
    }}>
      <Result
        status="500"
        title="500"
        subTitle="抱歉，服务器出现错误。"
        extra={[
          <Button type="primary" onClick={handleBackHome} key="home">
            返回首页
          </Button>,
          <Button onClick={handleRefresh} key="refresh">
            刷新页面
          </Button>
        ]}
      />
    </div>
  );
};

export default Error500;